<template>
  <el-dialog v-model="dialogVisible" :title="title" width="500" @open="emit('open')" @opened="emit('opened')"
    @close="emit('close')" @closed="emit('closed')" draggable modal>
    <template #header>
      <slot name="header"></slot>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer">
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">
            确定
          </el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
}
const closeDialog = () => {
  dialogVisible.value = false
}

const handleCancel = () => {
  closeDialog()
  emit('cancel')
}

const handleConfirm = () => {
  closeDialog()
  emit('confirm')
}

const emit = defineEmits<{
  open: [],
  opened: [],
  close: [],
  closed: [],
  cancel: [],
  confirm: []
}>()

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: '提示'
  }
})

defineExpose({
  dialogVisible,
  openDialog,
  closeDialog
})
</script>